<template>
    <div id="reconciliation">
      <el-container>
        <el-aside width="170px">
          <leftBar :parcel="left_menu"/>
        </el-aside>
        <el-container>
          <el-header height="80px">
            <topHeader :parcel="topHeader"/>
          </el-header>
          <el-main class="m-container">
            <h2 class="title">对账记录</h2>
            <div class="m-panel">
              <el-menu :default-active="defaultItem" class="el-menu-demo m-nav" mode="horizontal"  @select="handleSelect">
                <!--<el-menu-item index="" class="nav-list">全部</el-menu-item>-->
                <el-menu-item index="index_0" key="0" class="nav-list" >场次预订异常数据</el-menu-item>
                <el-menu-item index="index_1" key="1" class="nav-list" >场次报表check记录</el-menu-item>
                <el-menu-item index="index_2" key="2" class="nav-list" >交易报表check记录</el-menu-item>
              </el-menu>
              <div v-if="currentData.index == 'index_0'" key="0">
                <financalList channel="reconciliation_0" :parcel="listData" @upload="handleFinancalList" :total="total"></financalList>
              </div>
              <div v-if="currentData.index == 'index_1'" key="1">
                <div class="sub_nav">
                  <span  v-for="(item,ind) in subNavData" :key="ind" :class="[item.activeClass,'sub_nav_item']" @click="handleFinancalList({val:item.value,ind})">{{item.name}}</span>
                </div>
                <financalList channel="reconciliation_1" :parcel="listData" @upload="handleFinancalList" :total="total"></financalList>
              </div>
              <div v-if="currentData.index == 'index_2'" key="2">
                <traidingList :parcel="listData" @upload="handleTradingList" :total="total"></traidingList>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
  import "@/assets/common/base.css"
  import leftBar from '@/components/leftBar';
  import topHeader from '@/components/topHeader';
  import traidingList from '@/components/traidingList';
  import financalList from '@/components/financalList';
  import pager from '@/components/pager';
  import {Fetch} from "../../common/fetch";
  const basicData = Fetch('/admin/finance/api/page.php?action=get_base');
  const bookingErrorData = Fetch('/admin/finance/api/theme.php?action=get_theme_info&abnormal=1&page=1&page_num=10');
  const financalErrorData = Fetch('/admin/finance/api/financial_statements.php?action=get_statements_detail&channel=&abnormal=1&page=1&page_num=10');
  const traidingErrorData = Fetch('/admin/finance/api/transaction_report.php?action=get_transaction&channel=lehui&abnormal=1&page=1&page_num=10');
  const _dev_ = false;
    export default {
        name: "Reconciliation",
        components:{leftBar,topHeader,traidingList,financalList},
        data(){
          const subNavData = [{
            name:'全部',
            value:'',
            activeClass:'cur'
          },{
            name:'乐惠',
            value:'lehui',
            activeClass:''
          },{
            name:'大众点评',
            value:'dianping',
            activeClass:''
          }]
          return{
            left_menu:_dev_ ? basicDataTest.left_menu : [], //左侧导航数据
            topHeader:_dev_ ? basicDataTest.user : {},      //用户信息
            defaultItem:'index_0',
            subNavData:subNavData,
            bookingErrorData:[],                            //场次预订异常数据
            financalErrorData:[],                           //财务报表check异常数据
            traidingErrorData:[],                           //交易报表check异常数据
            bookingErrorDataCount : 0,
            financalErrorDataCount:0,
            traidingErrorDataCount:0,
            listData:[],
            total:0,
            currentData:{
              val:'',
              index:'',
              page:1,
              page_num:10
            }
          }
        },
        methods:{
          handleSelect(key){
            const self = this;
            this.currentData.index = key;
            switch(key){
              case 'index_0':
                self.listData = self.bookingErrorData;
                self.total = self.bookingErrorDataCount;
                break;
              case 'index_1':
                this.subNavData.forEach((item)=>{
                  item.activeClass="";
                })
                this.subNavData[0].activeClass='cur';
                self.listData = self.financalErrorData;
                self.total = self.financalErrorDataCount;
                break;
              case 'index_2':
                self.listData = self.traidingErrorData;
                self.total = self.traidingErrorDataCount;
                break;
            }
          },
          handleFinancalList({val,ind,page}){
            console.log(val,ind,page)
            const self = this;
            // this.currentData = {...this.currentData,...{val,ind,page}};
            let {page_num} = this.currentData;
            if(!page){
              this.currentData = {...this.currentData,...{val,ind}};
              if(val){
                Fetch(`/admin/finance/api/financial_statements.php?action=get_statements_detail&channel=${val}&abnormal=1&page=1&page_num=${page_num}`)
                  .then((res)=>{
                    if(res && res.data){
                      self.listData = res.data;
                      self.total = res.count;
                    }
                  })
              }else{
                self.listData =self.financalErrorData;
              }
              this.subNavData.forEach((item)=>{
                item.activeClass="";
              })
              this.subNavData[ind].activeClass='cur';
            }else{
              this.currentData = {...this.currentData,...{page:page}};
              let {val} = this.currentData
              Fetch(`/admin/finance/api/financial_statements.php?action=get_statements_detail&channel=${val}&abnormal=1&page=${page}&page_num=${page_num}`)
                .then((res)=>{
                  if(res && res.data){
                    self.listData = res.data;
                    self.total = res.count;
                  }
                })
            }

          },

          handleTradingList(obj){
            const self = this;
            this.currentData = {...this.currentData,...obj};
            let {page,page_num} = this.currentData;
            if(val){
              Fetch(`/admin/finance/api/financial_statements.php?action=get_statements_detail&channel=${val}&abnormal=1&page=${page}&page_num=${page_num}`)
                .then((res)=>{
                  if(res && res.data){
                    self.listData = res.data;
                    self.total = res.count;
                  }
                })
            }
          }
        },
        mounted(){
          const self =this;
          basicData.then((response)=>{
            const {left_menu,user}  = response.data;
            self.left_menu = left_menu;
            self.topHeader= user;
          });

          bookingErrorData.then((res)=>{
            if(res && res.data && res.data.length){
              self.bookingErrorData = res.data;
              self.bookingErrorDataCount = res.count;
            }
          });

          financalErrorData.then((res)=>{
            if(res && res.data && res.data.length){
              self.financalErrorData = res.data;
              self.financalErrorDataCount = res.count;
            }
          });

          traidingErrorData.then((res)=>{
            if(res && res.data){
              self.traidingErrorData = res.data.list || [];
              self.traidingErrorDataCount = res.count;
            }
          });

          setTimeout(()=>{
            self.handleSelect('index_0');
          },200)
        }
    }
</script>

<style scoped lang="scss">
  #reconciliation {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F2F2F2;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
  }
  .el-main{padding:30px}
  .el-header{padding:0;}
  .m-nav{
    margin:0 0 20px 0;
  }
  .el-menu--horizontal>.el-menu-item.is-active{
    border-bottom:4px solid #FFED8C;
  }
  .nav-list{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
  }
  .m-container {
    .title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #000000;
      letter-spacing: 0;
      display: inline-block;
      margin: 10px 0 27px;
      line-height: 1;
    }
    .m-panel{
      padding: 20px;
      background: #FFFFFF;
      -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
    }
    .sub_nav{
      margin-bottom:15px;
      &_item{
        display:inline-block;
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        padding:2px 5px;
        cursor:pointer;
        margin-right:10px;
      }
      .cur{
        border: 1px solid #FF679E;
        border-radius: 3px;
        color:#FF679E;
      }
    }
  }
</style>
